<template>
  <div class="album-list">
    <div class="album-info" v-for="(item,index) in data" :key="index">
      <div class="album-img">
        <img v-lazy="item.blurPicUrl" alt="">
      </div>
      <div class="album-maininfo">
        <div class="album-name">
          <span>{{ item.name }}</span>
          <span v-if="item.alias.length !== 0">({{ formatStr(item.alias) }})</span>
        </div>
        <div class="album-desc">
          <span>{{ item.artist.name }}</span>
          <span>{{ item.publishTime | formatDate }}</span>
        </div>
      </div>
    </div>

    <div class="pagination">
      <van-pagination v-model="currentPage" 
        :total-items="totalCount" 
        :show-page-size="6" 
        :items-per-page="20" 
        force-ellipses
        @change="pageChange">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
  import { formatDate } from '../../../common/js/formatDate'

  export default {
    props:{
      data: Array,
      totalCount:Number,
    },

    data() {
      return {
        currentPage:1,
      }
    },

    methods:{
      pageChange(val){
        this.$emit('pageChange',val);
      },

      formatStr(Str){
        // var str = Str;
        var result = Str.toString().replace(/\[]/g,'');
        return result
      }
    },

    filters:{
      formatDate(time) {
        let date = new Date(time)
        return formatDate(date, 'yyyy.MM.dd')
      }
    }
  }
</script>

<style scoped>
.album-list{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
}

.album-info{
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.album-img img{
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.album-name{
  font-size: 14px;
}

.album-desc{
  font-size: 12px;
}
</style>